﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        .box{
            display:flex;
        }
        .tp {
            width: 350px;
            height: 350px;
            background: url( https://img13.360buyimg.com/n1/jfs/t1/62356/34/20038/506000/62ce8160E7c7da38c/0e00f24c3d482738.jpg);
            position:relative;
            }
        .big {
            width: 200px;
            height: 200px;
            background:#ffd800;
            opacity:0.5;
            display:none;
            position:absolute;
        }
        .bigtp {
            position: relative;
            width: 500px;
            height: 500px;
           /* border: 1px solid #000000;*/
            overflow: hidden;
            display: none;
        }
            .bigtp img {
                width: 875px;
                height: 875px;
                
                position: absolute;
            }
    </style>
</head>
<body>
    <div class="box">
        <div class="tp">
            <div class="big"></div>
        </div>
        <div class="bigtp"><img src="https://img13.360buyimg.com/n1/jfs/t1/62356/34/20038/506000/62ce8160E7c7da38c/0e00f24c3d482738.jpg" alt="Alternate Text" /></div>
    </div>
    <script>
        let div1 = document.querySelector(`.tp`);
        let div2 = document.querySelector(`.big`);
        let div3 = document.querySelector(`.bigtp`)
        div1.onmouseenter = function () {
            div2.style.display = `block`;
            div3.style.display = `block`;
            div1.onmousemove = function (e) {
                let x = div1.getBoundingClientRect().x;
                let y = div1.getBoundingClientRect().y;
                var l = e.clientX - x - div2.offsetWidth / 2;
                var t = e.clientY - y - div2.offsetHeight / 2;
                l = l < 0 ? 0 : l;
                t = t < 0 ? 0 : t;
                var maxW = div1.offsetWidth - div2.offsetWidth;
                var maxH = div1.offsetHeight - div2.offsetHeight;
                l = l > maxW ? maxW : l;
                t = t > maxH ? maxH : t;
                div2.style.left = l + "px";
                div2.style.top = t + "px";
                div3.firstElementChild.style.left = -l*2.5 + "px";
                div3.firstElementChild.style.top = -t*2.5 + "px";
            }
        }
        div1.onmouseleave = function myfunction() {
            div2.style.display = `none`;
            div3.style.display = `none`;
        }
    </script>
</body>
</html>